<template>
    <view class="custom-popup" @tap="onMaskTap">
        <view class="popup-content">
            <slot></slot>
        </view>
    </view>
</template>
<script>
export default {
    name: 'BhPopup',
    emits: ['close', 'tapMask'],
    props: {
    },
    methods: {
        onClose() {
            this.$emit('close');
        },
        onMaskTap() {
            // 点击遮罩时关闭弹窗
            this.$emit('tapMask')
        }
    }
}
</script>
<style>
.custom-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-content {
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    text-align: center;
}

button {
    margin-top: 10px;
    padding: 10px;
    background-color: #007AFF;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}
</style>